<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="/WEB-INF/jsp/include/head.jsp" %>
<%@include file="/WEB-INF/jsp/include/treeview.jsp" %>
	<style type="text/css">
.ztree li span.button.switch.level0 {visibility:visible; width:1px;}
.ztree li ul.level0 {padding:0; background:none;}
	</style>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Form Elements - Ace Admin</title>

<meta name="description" content="Common form elements and layouts" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/font-awesome.min.css" />

<!-- page specific plugin styles -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/chosen.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/datepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-timepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/daterangepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-datetimepicker.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/colorpicker.css" />

<!-- text fonts -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-fonts.css" />

<!-- ace styles -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace.min.css"
	id="main-ace-style" />

<!--[if lte IE 9]>
			<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-part2.min.css" />
		<![endif]-->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-skins.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-rtl.min.css" />

<!--[if lte IE 9]>
		  <link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-ie.min.css" />
		<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script
	src="<%=request.getContextPath()%>/ace/assets/js/ace-extra.min.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
		<script src="<%=request.getContextPath()%>/ace/assets/js/html5shiv.min.js"></script>
		<script src="<%=request.getContextPath()%>/ace/assets/js/respond.min.js"></script>
		<![endif]-->
</head>
<script type="text/javascript">
var setting = {
		view: {
			dblClickExpand: false
		},
		 async : {  
             enable : true, 
             type: "get", 
             contentType: "application/json",
             url : "${ctx}/cmsCategory/asyncList.do", // Ajax 获取数据的 URL 地址  
             autoParam : [ "id", "name" ] //ajax提交的时候，传的是id值
         },
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			/* beforeClick: beforeClick, */
			onClick: onClick
		}
	};

	/* var zNodes =[
		{ id:1, pId:0, name:"根 Root", open:true},
			{ id:11, pId:1, name:"父节点 1-1", open:true},
			{ id:111, pId:11, name:"叶子节点 1-1-1"},
			{ id:112, pId:11, name:"叶子节点 1-1-2"},
			{ id:113, pId:11, name:"叶子节点 1-1-3"},
			{ id:114, pId:11, name:"叶子节点 1-1-4"},
			{ id:12, pId:1, name:"父节点 1-2", open:true},
			{ id:121, pId:12, name:"叶子节点 1-2-1"},
			{ id:122, pId:12, name:"叶子节点 1-2-2"},
			{ id:123, pId:12, name:"叶子节点 1-2-3"},
			{ id:124, pId:12, name:"叶子节点 1-2-4"},
			{ id:13, pId:1, name:"父节点 1-3", open:true},
			{ id:131, pId:13, name:"叶子节点 1-3-1"},
			{ id:132, pId:13, name:"叶子节点 1-3-2"},
			{ id:133, pId:13, name:"叶子节点 1-3-3"},
			{ id:134, pId:13, name:"叶子节点 1-3-4"}
	 ]; */
function beforeClick(treeId, treeNode) {
	var check = (treeNode && !treeNode.isParent);
	if (!check) alert("只能选择城市...");
	return check;
}

function onClick(e, treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("treeSel"),
	nodes = zTree.getSelectedNodes(),
	v = "";
	nodes.sort(function compare(a,b){return a.id-b.id;});
	for (var i=0, l=nodes.length; i<l; i++) {
		v += nodes[i].name + ",";
	}
	if (v.length > 0 ) v = v.substring(0, v.length-1);
	var cityObj = $("#citySel");
	cityObj.attr("value", v);
	var parentId = $("#parentId");
	parentId.attr("value",nodes[0].id);
	hideMenu();
}

function showMenu() {
	var cityObj = $("#citySel");
	var cityOffset = $("#citySel").offset();
	$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

	$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
	$("#menuContent").fadeOut("fast");
	$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
	if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
		hideMenu();
	}
}
function expandRoot(id){
	var treeObj = $.fn.zTree.getZTreeObj("treeSel");
	var treeNode = treeObj.getNodeByParam("id", id, null);
	$.ajax({
		type: "get",
	    url: "${ctx}/cmsCategory/asyncList.do",     //ajax请求地址
	    data :{id:id},
	    success: function (data) {
	    	data = data.trim();
	    	if(data.length>2){
		    	treeObj.addNodes(treeNode, data);
	    	}
	     },
	    error :function(data){
	    	alert(data);
	    }
	 });
	if (node.length>0) {
		treeObj.expandNode(nodes[0], true, true, true);
	}
}
$(document).ready(function(){
	$.ajax({
		type: "get",
	    url: "${ctx}/cmsCategory/asyncList.do",     //ajax请求地址
	    data :{id:'0'},
	    success: function (data) {
	    	 var zNodes = JSON.parse(data);
	     $.fn.zTree.init($("#treeSel"), setting, zNodes); //加载数据
	     expandRoot(1);//默认展开根节点
	     },
	    error :function(data){
	    	alert(data);
	    }
	 });
});
</script>

<body class="no-skin">
	<div class="breadcrumbs" id="breadcrumbs">

		<ul class="breadcrumb">
			<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a>
			</li>

			<li><a href="#">Tables</a></li>
			<li class="active">Simple &amp; Dynamic</li>
		</ul>
		<!-- /.breadcrumb -->

	</div>

	<!-- /section:basics/content.breadcrumbs -->
	<div class="page-content">
		<!-- /section:settings.box -->
		<div class="page-content-area">
			<div class="page-header">
				<h1>Form Elements</h1>
			</div>
			<!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<form id="drizzt-table" class="form-horizontal"
						action="<%=request.getContextPath()%>/cmsCategory/add.do"
						method="post">
						<!-- #section:elements.form -->
						 
  						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 父级栏目 </label>

							<div class="col-sm-9">
							<input type="hidden" name="parentId" id="parentId" value="${cmsCategory.id }">
								<input type="text" id="citySel" readonly="readonly"
									placeholder="parentId" value="${cmsCategory.name }"
									 onclick="showMenu(); return false;"
									class="col-xs-10 col-sm-5" />
									<label class="col-sm-1 control-label no-padding-right"
								><a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a></label>
							</div>
						</div>
						  						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 栏目名称 </label>

							<div class="col-sm-9">
								<input type="text" id="form-field-1"
									placeholder="name"
									name="name"
									class="col-xs-10 col-sm-5" />
							</div>
						</div>
						  						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 描述 </label>

							<div class="col-sm-9">
								<input type="text" id="form-field-1"
									placeholder="description"
									name="description"
									class="col-xs-10 col-sm-5" />
							</div>
						</div>
						  						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 关键字 </label>

							<div class="col-sm-9">
								<input type="text" id="form-field-1"
									placeholder="keywords"
									name="keywords"
									class="col-xs-10 col-sm-5" />
							</div>
						</div>
						  						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 排序 </label>

							<div class="col-sm-9">
								<input type="number" min="1" step="10" id="form-field-1" 
									placeholder="sort"
									name="sort"
									class="col-xs-10 col-sm-5" />
							</div>
						</div>
						  						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 备注 </label>

							<div class="col-sm-9">
								<input type="text" id="form-field-1"
									placeholder="remarks"
									name="remarks"
									class="col-xs-10 col-sm-5" />
							</div>
						</div>
						 
						<div class="clearfix form-actions">
							<div class="col-md-offset-3 col-md-9">
								<input  class="btn btn-info" type="submit" value="提交" />

								&nbsp; &nbsp; &nbsp;
								<input type="button" class="btn btn-info" onclick="location.href='<%=request.getContextPath()%>/cmsCategory/list.do'" value="返回" />
							</div>
						</div>
					</form>

					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content-area -->
	</div>
	<!-- /.page-content -->
	<div id="menuContent" class="menuContent" style="position: absolute; left: 59px; top: 131px; display: none;background-color: #E4E6E9;width: 300px;">
		<ul id="treeSel" class="ztree" style="margin-top:0; width:160px;"></ul>
	</div>
</body>

<!-- basic scripts -->

<!--[if !IE]> -->
<script type="text/javascript">
	window.jQuery
			|| document
					.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.min.js'>"
							+ "<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
	if ('ontouchstart' in document.documentElement)
		document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.mobile.custom.min.js'>" + "<"+"/script>");
</script>

<script
	src="<%=request.getContextPath()%>/ace/assets/js/bootstrap.min.js"></script>

<!-- the following scripts are used in demo only for onpage help and you don't need them -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace.onpage-help.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/docs/assets/js/themes/sunburst.css" />

</html>
